{% extends 'v2/layout.html.twig' %}

{% block title %}{{'user.settings.security_menu'|trans}} - {{ parent() }}{% endblock %}

{% set side_nav = 'security' %}

{% do script(['app/js/settings/security/index.js']) %}

{% block page_title %}
  {{'user.settings.security.content_title'|trans}}
{% endblock %}

{% block main_body %}
  {% if progressScore > 67 %}
    {% set security_type = 'success' %}
    {% set security_level = 'user.settings.security.high_level'|trans %}
  {% elseif progressScore > 34 %}
    {% set security_type = 'warning' %}
    {% set security_level = 'user.settings.security.middle_level'|trans %}
  {% else %}
    {% set security_type = 'danger' %}
    {% set security_level = 'user.settings.security.low_level'|trans %}
  {% endif %}
  <div class="es-security es-security-{{ security_type }} cd-mb32">
    <span class="security-icon">
      <i class="cd-icon cd-icon-{{ security_type }}"></i>
    </span>
    <span class="security-title">{{ 'user.settings.security.level'|trans }}</span>
    <span class="security-progress done"></span>
    <span class="security-progress {% if progressScore > 34 %}done{% endif %}"></span>
    <span class="security-progress {% if progressScore > 67 %}done{% endif %}"></span>
    <span class="security-level">{{ security_level }}</span>
  </div>

  {% if (setting('auth.register_mode') == 'email_or_mobile' or setting('auth.register_mode') == 'mobile') and not hasVerifiedMobile %}
    <div class="cd-alert cd-alert-warning">{{ 'user.settings.security.mobile_bind_daily_tips'|trans }}</div>
  {% endif %}

  <div class="es-setting">
    <span class="setting-icon"><i class="cd-icon cd-icon-lock"></i></span>
    <span class="setting-title">{{'user.fields.login_password'|trans}}</span>
    <span class="setting-content">{{'user.settings.security.login_password_tips'|trans}}</span>
    <span class="setting-action">
      {% if hasLoginPassword %}
        <span class="es-setting-status es-setting-status-done">{{'site.setting.finished'|trans}}</span>
        <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_password') }}" data-toggle="modal" data-target="#modal">
          {{'form.btn.modify'|trans}}
        </button>
      {% else %}
        <span class="es-setting-status">{{'site.setting.unfinished'|trans}}</span>
        <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_password') }}" data-toggle="modal" data-target="#modal">
          {{'form.btn.set'|trans}}
        </button>
      {% endif %}
    </span>
  </div>

  <div class="es-setting">
    <span class="setting-icon"><i class="cd-icon cd-icon-payment"></i></span>
    <span class="setting-title">{{'user.fields.pay_password'|trans}}</span>
    <span class="setting-content">{{'user.settings.security.pay_password_tips'|trans}}</span>
    <span class="setting-action">
      {% if hasPayPassword %}
        <span class="es-setting-status es-setting-status-done">{{'site.setting.finished'|trans}}</span>
        <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_reset_pay_password') }}" data-toggle="modal" data-target="#modal">{{'form.btn.modify'|trans}}</button>
      {% else %}
        <span class="es-setting-status">{{'site.setting.unfinished'|trans}}</span>
        <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_pay_password') }}" data-toggle="modal" data-target="#modal">{{'form.btn.set'|trans}}</button>
      {% endif %}
    </span>
  </div>

  <div class="es-setting">
    <span class="setting-icon"><i class="cd-icon cd-icon-safe"></i></span>
    <span class="setting-title">{{'user.settings.security.questions'|trans}}</span>
    <span class="setting-content">{{'user.settings.security.questions_tips'|trans}}</span>
    <span class="setting-action">
      {% if hasFindPayPasswordQuestion %}
        <span class="es-setting-status es-setting-status-done">{{'site.setting.finished'|trans}}</span>
        <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_security_questions') }}" data-toggle="modal" data-target="#modal">{{'form.btn.view'|trans}}</button>
      {% else %}
        <span class="es-setting-status">{{'site.setting.unfinished'|trans}}</span>
        <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_security_questions') }}" data-toggle="modal" data-target="#modal">{{'form.btn.set'|trans}}</button>
      {% endif %}
    </span>
  </div>

  {% if (setting('cloud_sms.sms_enabled')|default('')) == '1' and (setting('cloud_sms.sms_bind')|default('')) == 'on' %}
    <div class="es-setting">
      <span class="setting-icon"><i class="cd-icon cd-icon-iphone"></i></span>
      <span class="setting-title">{{'user.settings.security.mobile_bind'|trans}}</span>
      <span class="setting-content">
        {% if hasVerifiedMobile %}
          {{'site.bind.mobile_finished'|trans}}：{{ blur_phone_number(verifiedMobile) }}
        {% else %}
          {{'user.settings.security.mobile_bind_tips'|trans}}
        {% endif %}
      </span>
      <span class="setting-action">
        {% if hasVerifiedMobile %}
          <span class="es-setting-status es-setting-status-done">{{'site.bind.finished'|trans}}</span>
          <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_bind_mobile') }}" data-toggle="modal" data-target="#modal">{{'form.btn.modify'|trans}}</button>
        {% else %}
          <span class="es-setting-status">{{'site.bind.unfinished'|trans}}</span>
          <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_bind_mobile') }}" data-toggle="modal" data-target="#modal">{{'form.btn.bind'|trans}}</button>
        {% endif %}
      </span>
    </div>
  {% endif %}

  <div class="es-setting">
    <span class="setting-icon"><i class="cd-icon cd-icon-email"></i></span>
    <span class="setting-title">{{'user.settings.email_menu'|trans}}</span>
    <span class="setting-content">
      {% if hasEmail %}
        {{'site.setting.email_finished'|trans}}：{{ blur_number(email) }}
      {% else %}
        {{'user.settings.security.email_setting_tips'|trans}}
      {% endif %}
    </span>
    <span class="setting-action">
      {% if hasEmail %}
        {% if hasVerifiedEmail %}
          <span class="es-setting-status es-setting-status-done">{{'site.verify.finished'|trans}}</span>
          <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_email') }}" data-toggle="modal" data-target="#modal">{{'form.btn.modify'|trans}}</button>
        {% else %}
          <span class="es-setting-status">{{'site.verify.unfinished'|trans}}</span>
          <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_email') }}" data-toggle="modal" data-target="#modal">{{'form.btn.modify'|trans}}</button>
          <button class="btn cd-btn cd-btn-ghost-primary" id="send-verify-email" data-url="{{ path('settings_email_verify') }}" data-loading-text="{{'form.btn.verifying'|trans}}">{{'form.btn.verify'|trans}}</button>
        {% endif %}
      {% else %}
        <span class="es-setting-status">{{'site.setting.unfinished'|trans}}</span>
        <button class="btn cd-btn cd-btn-ghost-default" data-url="{{ path('settings_email') }}" data-toggle="modal" data-target="#modal">{{'form.btn.bind'|trans}}</button>
      {% endif %}
    </span>
  </div>

{% endblock %}